<template>
  <div>
    <div class="index">
      <div class="index-list">
        <div class="index-box">
          <img src="../../assets/jin/indexBox1.png" alt="" />
          <h4>解决方案</h4>
          <p>驾培行业一体化解决方案</p>
          <div>
            <span>
              <router-link to="">了解更多</router-link>
            </span>
          </div>
        </div>
        <div class="index-box">
          <img src="../../assets/jin/indexBox2.png" alt="" />
          <h4>加盟合作</h4>
          <p>共同发展，共创双赢</p>
          <div>
            <span>
              <router-link to="">了解更多</router-link>
            </span>
          </div>
        </div>
        <div class="index-box">
          <img src="../../assets/jin/indexBox3.png" alt="" />
          <h4>教学中心</h4>
          <p>通俗易懂的教学视频</p>
          <div>
            <span>
              <router-link to="">了解更多</router-link>
            </span>
          </div>
        </div>
        <div class="index-box">
          <img src="../../assets/jin/indexBox4.png" alt="" />
          <h4>信息中心</h4>
          <p>全方位的驾驶信息</p>
          <div>
            <span>
              <router-link to="">了解更多</router-link>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="footer footer-bg-black">
      <div>
        Copyright©2014-2021 佛山市易驾星电子科技有限公司 备案号：<router-link
          to=""
          >粤ICP备2021006150号
        </router-link>
      </div>
    </div>

    <!-- 弹框 -->
    <message-box></message-box>

    <!-- 在线咨询 -->
    <div class="online-consultation" @click="toOnline">
      <div></div>
    </div>
  </div>
</template>

<script>
import MessageBox from '../../components/MessageBox.vue';

export default {
  name: "index",
  components:{
    MessageBox
    
  },
  methods:{
    toOnline() {
      let routeUrl = this.$router.resolve({
        path: "/online",
      });
      window.open(routeUrl.href, "_blank");
    },
  }
};
</script>
<style scoped lang="sass">
.index
    padding-top: 500px
    padding-right: 15px
    padding-left: 15px
    height: 888px
    background: url("../../assets/jin/index-bg.jpg") no-repeat
    background-size: auto 100%
    .index-list
        display: flex
        width: 1300px
        margin: 0 auto
    .index-box
        width: 20%
        height: 270px
        margin: 10px 40px 0 10px
        padding: 10px
        text-align: center
        background: rgba(0,0,0,0.6)
        position: relative
        color: #f6f6f6
        img
            width: 80px
            height: 80px
            margin: 20px auto
        h4
            font-weight: 400 !important
            line-height: 1.8
        p
            padding: 0px 10px
            line-height: 60px
        div
        span
            a
                background-color: rgba(255,255,255,0.7)
                color: #142b57
                padding: 2px 4px 2px 4px
                font-size: 14px
                display: inline-block
                width: 100px
.footer
    background: rgba(0, 0, 0, 0.6)
    line-height: 60px
    text-align: center
    position: absolute
    width: 100%
    bottom: -255px
    left: 0
    div
        display: inline-block
        padding: 0 10px 0px 10px
        font-size: 20px
        letter-spacing: 2px
        color: #fff
    a
        color: #fff
    a:hover
        text-decoration: underline
</style>